<!DOCTYPE HTML>
<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<head>
</head>
<body>
<canvas id="myCanvas" width="600" height="400" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
/*
旋转
与移动一样，Context对象能够调用rotate()方法来按一定的夹角转动Canvas画布。rotate()方法的原型如下：

void rotate(radian);

用于将Canvas画布顺时针转动到与原x轴（横轴）方向成radian角的位置，radian按弧度制，转动后x轴方向同时发生改变。同样，旋转将不会影响到已经绘制的图形但是会影响其它由该Canvas生成的Context对象。

下面的旋转的示例：形无效。
*/
/*
缩放
Context对象可以调用scale()方法来控制Canvas在x轴和y轴方向上的缩放比例。scale()方法的原型如下：

void scale(x, y);

其中x、y分别表示在x轴和y轴上的缩放比例，必须是正数。同translate()与rotate()一样，scale也是对整个Canvas对象的改变，但是不会影响已经绘制的图形。
*/

var canvas =document.getElementById("myCanvas");    
var context =canvas.getContext("2d");    
     
context.fillStyle = "blue";    
context.fillRect(0, 0, 200, 200);    
 // 旋转   
//context.rotate(Math.PI / 4); 
//缩放
context.scale(1.5, 0.5);      
context.fillStyle = "green";    
context.fillRect(0, 0, 100, 100);    
     
var context2 =canvas.getContext("2d");    
context2.fillStyle = "red";    
context2.fillRect(0, 0, 50, 50);    



</script>
</body>
</html>